Ext.onReady(function() {

		Ext.QuickTips.init();

		Ext.fly(document.body).on('contextmenu', function(e, target) {
			e.preventDefault();
		});	

		Ext.BLANK_IMAGE_URL = "http://extjs.cachefly.net/ext-3.3.1/resources/images/default/s.gif";	
		
		var login = new Ext.ux.Login();
		login.on('login_success', function(successData, me) {
			var allowedLand = Ext.isDefined(successData.userLand) ? successData.userLand : [];
			var Home = new Ext.Panel({
					id: 'home'
				,	border: false
				,	autoScroll: true
				,	mapCreated: false
				,	autoLoad: 'resources/docs/home.html'
/*				
				,	html: String.format('<div class="home">'
							+	'	<p>Welcome to the {0}s Members section.</p>'
							+	'	<p>Use the menu above to view and manage information about your properity.</p>'
							+	'</div>', Config.mainTitle)
*/				
			});

			var graph1_store = new Ext.data.JsonStore({
					url: Config.baseUrl + 'resources/api/app.php'
				,	baseParams: { cmd: 'species-land' }
				,	root: 'records'
				,	totalProperty: 'totalSpecies'
				,	id: 'land_species'
				,	autoLoad: true
				,	fields: [
							{ name: 'land_name', type: 'string' }
						,	{ name: 'x_species', type: 'int' }
						,	{ name: 'totalSpecies', type: 'int' }
					]			
			});

			var graph1 = new Ext.ux.GVisualizationPanel({
					id: 'graph1'
				,	visualizationPkg: 'barchart'
				,	title: 'Property Diversity'
				,	store: graph1_store
				,	columns: [{
							dataIndex: 'land_name'
						,	label: 'Property'
					},{
							dataIndex: 'x_species'
						,	label: 'Known Species'
					},{
							dataIndex: 'totalSpecies'
						,	label: String.format('Total in North {0} Prairies', Config.mainTitle)
					}]
			});
			
			var Map = new SLM.MapPanel();
			Map.on('show', function(){
				this.loadMarker();
			});
			var DwC = new SLM.DwcPanel({
				allowedLand: allowedLand
			});
			var Events = new SLM.EventsPanel({
				allowedLand: allowedLand
			});
			var contentPanel = new Ext.Panel({
					id: 'content-panel'
				,	region: 'center'
				,	layout: 'card'
				,	hideMode: 'offsets'
				,	activeItem: 'home'
				,	border: false
				,	mapCreated: false
				,	layoutConfig: {
						deferredRender: false
					}
				,	items: [Home, Map, DwC, Events, graph1]
				,	tabchange: {
						render: function(tabs, tab) {
							if (!this.mapCreated) {
								drawMap();
								this.mapCreated = true;
							} 
						}
					}
				
			});

			var tb = new Ext.Toolbar({
					items: [{
							text: 'Home'
						,	scope: contentPanel
						,	handler: function() {
								this.getLayout().setActiveItem('home');
							}
					}, {
							text: 'Properties'
						,	iconCls: 'icon_home'
						,	scope: contentPanel
						,	handler: function() {
								this.getLayout().setActiveItem('map-panel');
								
							}
					}, {
							text: 'Species'
						,	iconCls: 'icon_species'
						,	scope: contentPanel
						,	handler: function() {
								this.getLayout().setActiveItem('dwc-panel');
								DwC.grid.store.load({params: {
										start: 0
									, limit: 100
								}});
							}
					}, {
							text: 'Events'
						,	iconCls: 'icon_events'
						,	scope: contentPanel
						,	handler: function() {
								this.getLayout().setActiveItem('events-panel');
								Events.grid.store.load({params: {
										start: 0
									, limit: 100
								}});
							}
					}, {
							text: 'Property Diversity'
						,	iconCls: 'icon_chart_line'
						,	scope: contentPanel
						,	handler: function() {
								this.getLayout().setActiveItem('graph1');
								graph1.onLoadCallback();
							}

					}]		
			});
	
			var viewport = new Ext.Viewport({
					layout:'border'
				,	id: 'viewport'
				,	items: [{
							region: 'north'
						,	id: 'north'
						,	border: false
						, bodyStyle: 'padding: 12px; background-color: #d7e4f3'
						,	html: '<div class="puget-title">'+Config.mainTitle+'</div><div class="user-header"><div id="header-username" class="username"></div><div id="signout" class="signout"></div></div>'
						, bbar: tb
					}
					, contentPanel
					]
			});

			var signout = new Ext.Button({
					text: 'Sign Out'
				,	renderTo: 'signout'
				,	handler: function() {
						window.location.reload();
					}
			});

			Ext.get('header-username').update('Username: ' + this.name );
			this.close();

		});
		login.show();

});